import React from 'react';
import {inject, observer} from 'mobx-react';
import {Row, Col} from 'antd';
import {
  WeaNewScroll,
  WeaSearchGroup,
  WeaFormItem,
  WeaBrowser,
  WeaInput,
  WeaSelect,
  WeaLocaleProvider
} from 'ecCom';
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
@inject ('planResultListStore')
@observer
export default class MoreSearch extends React.Component {
  constructor (props) {
    super (props);
    this.state = {  includeSubOption:[
      {
        key:"3",
        showname:getLabel('508780','含子分部') 
      },
      {
        key:"1",
        showname:getLabel('18919','仅本分部') 
      },
      {
        key:"2",
        showname:getLabel('18920','仅子分部') 
      },
    ],
    includeDepOption:[

      {
        key:"3",
        showname:getLabel('508784','含子部门') 
      },
      {
        key:"1",
        showname:getLabel('18916','仅本部门') 
      },
      {
        key:"2",
        showname:getLabel('18917','仅子部门') 
      },
    ],
    searchConditionItems:[]
  };
    this.store = this.props.planResultListStore;
  }

  componentWillMount(){
      this.store.getStatusOption()
  }
  advanceSearch(){
    if(typeof this.props.onSearch === "function") {
       this.props.onSearch();
    }
  }
  initConditionItems = () => {
    let {
      moreSearchValues,
      hrmData,
      subcompanyData,
      departmentData,
      onSearchChange,
      statusOptions
    } = this.store;
    let _this = this;
    let searchConditionItems = [];
    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jy8sbt@titlevalue`} label={getLabel('24986','标题')} ratio1to2>
          <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ukp5pp@titlevalue`}
            value={moreSearchValues.title}
            onChange={e => _this.onValueChange ('title', e)}
            onPressEnter={()=>this.advanceSearch()}
          />
        </WeaFormItem>
      ),
    });

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vvo21n@status`} label={getLabel('23247','状态') } ratio1to2>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@3crlut@status`}
            hasBorder
            options={toJS(statusOptions)}
            value={moreSearchValues.status}
            onChange={e => _this.onValueChange ('status', e)}
          />
        </WeaFormItem>
      ),
    });

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4kl8yn@hrmdata`} label={getLabel('30042','人员')} ratio1to2>
          <div className="hrm">
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@vxd66r@hrmdata`}
              type={17}
              title={getLabel('179','人力资源') }
              isSingle={false}
              replaceDatas={hrmData}
              onChange={(ids, names) =>
                onSearchChange ({hrmIds: ids, hrmnames: names})}
            />
          </div>
        </WeaFormItem>
      ),
    });

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@fdsvbl@subtype`} label={getLabel('33553','分部')} ratio1to2>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@825u74@subtype`}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4bfro7@subtype`} md={12}>
              <div className="left-col">
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@8f6x2r@subtype`}
                  hasBorder
                  options={this.state.includeSubOption}
                  value={moreSearchValues.subType}
                  onChange={e => _this.onValueChange ('subType', e)}
                />

              </div>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tey5v6@subdata`} md={12}>
              <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@ppgese@subdata`}
              title={getLabel('33553','分部')}
                type={164}
                replaceDatas={subcompanyData}
                type={194}
                isSingle={false}
                // onChange={e=> _this.onValueChange('sub',e)}
                onChange={(ids, names) =>
                  onSearchChange ({sub: ids, subnames: names})}
              />
            </Col>

          </Row>

        </WeaFormItem>
      ),
    });

    searchConditionItems.push ({
      com: (
        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@shwder@deptype`} label={getLabel('27511','部门')} ratio1to2>
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gturx9@deptype`} md={12}>
            <div className="left-col">
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@k0vllo@deptype`}
                options={this.state.includeDepOption}
                value={moreSearchValues.depType}
                onChange={e => _this.onValueChange ('depType', e)}
              />
            </div>
          </Col>

          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qe2imd@deptdata`} md={12}>
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@pmpiuw@deptdata`}
              type={4}
              title={getLabel('27511','部门')}
              hasBorder
              type={57}
              isSingle={false}
              replaceDatas={departmentData}
              onChange={(ids, names) =>
                onSearchChange ({dep: ids, depnames: names})}
            />
          </Col>

        </WeaFormItem>
      ),
    });
    // this.setState({searchConditionItems})
    // this.store.searchConditionItems=searchConditionItems
   return searchConditionItems;
  };

  onValueChange = (paramName, e) => {
    this.store.onMoreSearchChange (paramName, e);
  };

  render () {
    return (
      <div className="condition-search-container">
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4wpop7`} height={300}>
          <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4clxdn`}
            title={getLabel('32905','常用条件') }
            items={this.initConditionItems()}
            showGroup={this.store.showGroup}
            col={2}
          />
        </WeaNewScroll>
      </div>
    );
  }
}
